<script setup>
import { getCraftMaintainApi } from '@/apis/user'
import { showToast } from 'vant';
import { ref } from 'vue';
const props = defineProps(['page', 'overview_id'])
let gongyiList = ref([])

const getGongyiList = async () => {
    const res = await getCraftMaintainApi(props.overview_id)
    if (res.data.code == 200) {
        let list = res.data.data.info.details
        gongyiList.value = list
    } else {
        showToast(res.data.msg)
    }
}

getGongyiList()

</script>

<template>
    <div class="gongyibox clmstart">
        <div class="listbox" v-if="page == 1">
            <div class="citem" v-for="item in gongyiList" :key="item.id">
                <p class="ctitle">{{ item.new_description }}</p>
                <div class="gongyiinfo">
                    <div class="fitem" v-for="sitem in item.params" :key="sitem.id">
                        <div class="ftitle">{{ sitem.new_parametername }}</div>
                        <div class="ffanwei">Range:{{ sitem.new_parameterscope }}-{{ sitem.new_parameterscope2 }}</div>
                        <div class="fzhi">
                            Actual:{{ sitem.new_parameteractualvalue }}
                            <img src="@/assets/img/jt_shang.png" class="jtimg"
                                v-if="Number(sitem.new_parameteractualvalue) > Number(sitem.new_parameterscope2)" />
                            <img src="@/assets/img/jt_xia.png" class="jtimg"
                                v-if="Number(sitem.new_parameteractualvalue) < Number(sitem.new_parameterscope)" />
                        </div>
                    </div>
                    <div class="fitem">
                        <hr>
                        <div class="ftitle">
                            <div class="ftitleinfo">Dosing Instruction</div>
                        </div>
                        <div class="fjianyi">{{ item.new_yaoji }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="listbox" v-else>
            <div class="citem" v-for="item in gongyiList" :key="item.id">
                <div class="ctitle">{{ item.new_description }}</div>
                <div class="listinfo">
                    <div class="litem">
                        <div class="ltitle">Overflow Management</div>
                        <div class="lcont">{{ item.new_yiliu }}</div>
                    </div>
                    <div class="litem">
                        <div class="ltitle">Bath-make-up Cycle</div>
                        <div class="lcont">{{ item.new_caoye }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.gongyibox {
    position: relative;
    width: 582px;
    font-size: 1.78rem;
    font-family: 'Helvetica';
    .listbox {
        width: 100%;
        .citem {
            position: relative;
            width: 582px;
            border: 1px solid #004d91;
            box-sizing: border-box;
            border-radius: 13px;
            margin-bottom: 40px;
            .ctitle {
                position: absolute;
                top: -10px;
                left: 16px;
                font-weight: bold;
                color: #004d91;
                background: url('@/assets/img/bg.jpg') repeat;
                background-size: 20px 20px;
                padding: 0 8px 0 5px;
            }
            .gongyiinfo, .listinfo {
                padding: 30px 15px 20px;
                .fitem, .litem {
                    position: relative;
                    display: flex;
                    width: 100%;
                    text-align: left;
                    margin-bottom: 15px;
                    .ftitle, .ltitle {
                        color: #004d91;
                    }
                }
            }
            .gongyiinfo {
                .fitem {
                    .ftitle {
                        width: 30%;
                    }
                    .ffanwei,
                    .fzhi {
                        width: 35%;
                    }
                    .fzhi {
                        .jtimg {
                            width: 14px;
                            height: 19px;
                            margin-left: 8px;
                        }
                    }
                }
                .fitem:last-child {
                    margin-bottom: 0;
                    margin-top: 30px;
                    flex-direction: column;
                    hr {
                        position: absolute;
                        top: -15px;
                        left: 0;
                        width: 100%;
                        height: 1px;
                        border: none;
                        background: linear-gradient(to right, #4D8DFB 0%, #4D8DFB 60%, transparent 60%);
                        background-size: 16px 1px;
                        background-repeat: repeat-x;
                        margin: 0;
                    }
                    .ftitle {
                        width: 100%;
                        .ftitleinfo {
                            width: 230px;
                            height: 30px;
                            line-height: 1.2;
                            background-color: #4b91f8;
                            text-align: center;
                            color: #ffffff;
                            clip-path: polygon(0 0, 221px 0, 230px 14px, 221px 100%, 0 100%, 9px 14px, 0 0);
                        }
                    }
                    .fjianyi {
                        line-height: 1.5;
                    }
                }
            }
            .listinfo {
                .litem {
                    .ltitle {
                        width: 47%;
                    }
                    .lcont {
                        flex: 1;
                    }
                }
                .litem:last-child {
                    margin-bottom: 0;
                }
            }
        }
        .citem:first-child {
            margin-top: 68px;
        }
        .citem:last-child {
            margin-bottom: 0;
        }
    }
}
</style>